<template>
  <div class="dashboard-container">
    <!-- 核心指标卡片区 -->
    <el-row :gutter="16" class="mb-4">
      <el-col :span="4" v-for="stat in stats" :key="stat.label">
        <stat-card :icon="stat.icon" :label="stat.label" :value="stat.value" />
      </el-col>
    </el-row>

    <!-- 数据可视化图表区 -->
    <el-row :gutter="16">
      <el-col :span="12">
        <stat-chart
          title="设备状态分布"
          :option="deviceStatusChartOption"
          height="320px"
        />
      </el-col>
      <el-col :span="12">
        <stat-chart
          title="告警趋势"
          :option="alertTrendChartOption"
          height="320px"
        />
      </el-col>
    </el-row>
    <el-row :gutter="16" class="mt-4">
      <el-col :span="12">
        <stat-chart
          title="库存变化"
          :option="stockChangeChartOption"
          height="320px"
        />
      </el-col>
      <el-col :span="12">
        <stat-chart
          title="设备类型分布"
          :option="deviceTypeChartOption"
          height="320px"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import StatCard from '@/components/StatCard.vue'
import StatChart from '@/components/StatChart.vue'
import { ref } from 'vue'

// 模拟数据
const stats = ref([
  { icon: 'Monitor', label: '设备总数', value: 86 },
  { icon: 'Bell', label: '告警总数', value: 12 },
  { icon: 'Check', label: '在用设备', value: 69 },
  { icon: 'Box', label: '库存预警', value: 3 },
  { icon: 'Tools', label: '今日保养', value: 5 },
  { icon: 'Stopwatch', label: '到期物资', value: 2 }
])

// 设备状态分布饼图
const deviceStatusChartOption = ref({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [
    {
      name: '设备状态',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: { show: false },
      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      labelLine: { show: false },
      data: [
        { value: 69, name: '在用' },
        { value: 12, name: '停用' },
        { value: 5, name: '维修中' }
      ]
    }
  ]
})

// 告警趋势折线图
const alertTrendChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['6-6', '6-7', '6-8', '6-9', '6-10', '6-11', '6-12'] },
  yAxis: { type: 'value' },
  series: [{
    name: '告警数',
    data: [2, 4, 3, 5, 6, 4, 2],
    type: 'line',
    smooth: true
  }]
})

// 库存变化柱状图
const stockChangeChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['仓库A', '仓库B', '仓库C'] },
  yAxis: { type: 'value' },
  series: [{
    name: '库存数',
    data: [120, 95, 66],
    type: 'bar'
  }]
})

// 设备类型分布
const deviceTypeChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['影像类', '监护类', '检验类', '治疗类'] },
  yAxis: { type: 'value' },
  series: [{
    name: '数量',
    data: [22, 35, 18, 11],
    type: 'bar'
  }]
})
</script>

<style scoped>
.dashboard-container {
  padding: 32px;
  background: #f8f9fa;
  min-height: 100vh;
}
.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
</style>
